<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Template</title>
<link rel="stylesheet" type="text/css" href="images/loxia/loxia.css"/>
<link rel="stylesheet" type="text/css" href="images/jquery.datepick.css"/>
<style>
 * {
 	font-family: verdana,arial;
 	font-size: 10pt;
 }
</style>
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.livequery.js"></script>
<script type="text/javascript" src="scripts/loxia/jquery.loxiacore-1.0.js"></script>
<script type="text/javascript" src="scripts/loxia/jquery.loxiadatepicker-1.0.js"></script>
<script type="text/javascript" src="scripts/loxia/jquery.loxiatable-1.0.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();

function hi(msg){
	$j.log("hi " + msg);
}
function f1(value){
	return "f1" + value;
}

$j(document).ready(function(){
	$j.loxia.init({debug:true});
	
	$j("#idForm").bind("submitFailureEvent", function(event,data){
		for(var i=0; i< data.length; i++)
			$j.log(data[i]);
	});

	$j("#idTable").loxiaTable({sort:"c,asc",data:[{a: "Hello", b: "I", c : "am", d : "fine."},
	                                 {a: 500, b: true, c : ""}],
	                           selected :{col_0 :{Hello:"Hello"}},
	                           page: true,
	                           cacheSelect: true,
	                           pageCount:10,
	                           currentPage:2,
	                           url: "file://D:/Work%20Folder/Projects_ext/loxia2/web/src/main/webapp/testtable.json"});

    $j("#idTable").bind("dataReloadedEvent", function(event,data){
        $j.log(data);
    });
    $j("#idTable").bind("selectChangedEvent", function(event,data){
    	var count = 0;
    	for (k in data[1]) if (data[1].hasOwnProperty(k)) count++;
        $j.log("Current Selected:" + count);
    });

    $j("#idEditTable").loxiaDynTable({append: 1});

    $j("#idEditTable").bind("rowChangedEvent", function(event,data){
    	$j.log(data);
    });
    
    $j.loxia.initLidgets();    	
});

function sampleFormValidate(oForm){
	return "This is one error";
}
function checkAny(value){
	return "**error";
}
</script>
</head>
<body>
<form id="idForm" name="sampleForm">
<button class="lidget" type="button" onclick="var data = $j.loxia.syncXhr('file://D:/Work%20Folder/Projects_ext/loxia2/web/src/main/webapp/testdata.json',{data:{a:'b'},form:'idForm'}); $j.log(data);">en</button>
<input name="foo" class="lidget" type="button" value="hah" onclick="$j.loxia.submitForm('idForm')"/>
<input name="bar" class="lidget" required="true" checkmaster="checkNumber" formatter="f1"/>
<input name="date" class="lidget datepicker" required="true" checkmaster="checkDate,checkAny"/>
<select id="a" name="sel" class="lidget" required="true"><option value="">blank</option><option value="a">a</option></select>
<input type="text" name="kitten.cat" class="lidget"/>
<textarea class="lidget" name="kitten.desc" required="true"  checkmaster="checkDate"></textarea>
<table id="idTable" style="width: 100%">
	<thead><tr><th colspan="5">Head</th></tr>
	<tr><th property="a" name="ak"><input type="checkbox"/></th><th property="a" name="bk"><input type="radio"/>Please Select</th><th property="a">A</th><th property="b" sort="b">B</th><th property="c" sort="c">C</th><th property="d" sort="d">D</th></tr></thead>
	<tbody>
		<tr><td><input name="ak" type="checkbox"/></td><td><input name="bk" type="radio"/></td><td>First Tbody A</td><td>First Tbody B</td><td>First Tbody C</td><td>First Tbody D</td></tr>
	</tbody>
	<tbody>
		<tr><td>Second Tbody A</td><td>Second Tbody B</td><td>Second Tbody C</td><td>Second Tbody D</td></tr>
	</tbody>
	<tfoot></tfoot>
</table>
<table id="idEditTable">
	<thead><tr><th colspan="6">Head</th></tr>
	<tr><th><input type="checkbox"/></th><th formula="$2*($3+$4*2):2">Please Select</th><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
	<tbody>
		<tr><td><input name="ak" type="checkbox"/></td><td>&nbsp;</td><td><input name="abc" value="3"/></td><td><textarea class="lidget" name="kitten(0).desc" required="true">2</textarea></td><td>2</td><td><input name="date(0)" class="lidget datepicker" required="true" checkmaster="checkDate,checkAny"/></td></tr>
		<tr><td>&nbsp;</td><td>&nbsp;</td><td>4</td><td><textarea class="lidget" name="kitten(1).desc" required="true">7</textarea></td><td>2</td><td><input name="date(1)" class="lidget datepicker" required="true" checkmaster="checkDate,checkAny"/></td></tr>
	</tbody>		
	<tbody>
		<tr><td><input name="ak" type="checkbox"/></td><td>&nbsp;</td><td>5</td><td><textarea class="lidget" name="kitten(#).desc" required="true"></textarea></td><td>2</td><td><input id="date(#)" name="date(#)" class="lidget datepicker" required="true" checkmaster="checkDate,checkAny"/></td></tr>
	</tbody>
	<tfoot>
		<tr><td>Summary:</td><td decimal="2">&nbsp;</td><td>&nbsp;</td><td  decimal="2" colspan="2">&nbsp;</td><td>&nbsp;</td></tr>
	</tfoot>
</table>
</form>
<div id="error" style="display: none;">This is one <B>Error</B><br/>Please check it.</div>
<div id="test"><table id="it1"><tr><td><table id="it2"><tr><td>&nbsp;</td></tr></table></td></tr></table></div>
<button onclick="$j('#test').find('> table').each(function(){alert($j(this).attr('id'));})">kkk</button>
</body>
</html>